<template>
  <div class="card flex">
    <div class="item" v-for="(item,index) in list" :key="index">
      <image class="img" :src="item.listPicUrl" mode="widthFix"/>
      <div class="footer">
        <div class="title">
          <image class="yx" src="https://yanxuan.nosdn.127.net/static-union/16698631101bcf18.png" mode="widthFix"
          />
          {{item.name}}
        </div >
        <div class="red">
          <image class="hb" src="https://yanxuan.nosdn.127.net/static-union/166909947513c0c8.png" mode="widthFix"
          />
          可用红包
        </div>
        <div class="price">到手
          <span class="new_price">￥{{item.retailPrice}}</span>
          <span class="old_price">￥{{item.sortOriginPrice}}</span>
        </div>
        <div class="mj">满99减30元</div>
        <div class="cd">
          <span class="left">每日抄底</span>
          距结束2天
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">




//接受父组件传递的参数
let props = defineProps(['list'])
</script>

<style scoped lang="less">
.card{
  width: 100%;
  flex-wrap: wrap;

  .item{
    width: 47%;
    margin: 20rpx 0;
    margin-right: 20rpx;
    box-sizing: border-box;
    .img{
      width: 100%;
    }
    .footer{
      width: 100%;
      .title{
        font-size: 28rpx;
        .yx{
          width: 28rpx;
        }
      }
      .red{
        border: 1px solid #ccc;
        border-radius: 20rpx;
        font-size: 20rpx;
        display: inline-block;
        .hb{
          width: 22rpx;
        }
      }
      .price{
        font-size: 26rpx;
        color: red;
        .new_price{
          font-size: 38rpx;
          font-weight: 900;
        }
        .old_price{
          color: #ccc;
          text-decoration: line-through;
        }
      }
      .mj{
        background-color: red;
        border-radius: 20rpx;
        display: inline-block;
        color: white;
        padding: 6rpx;
        font-size: 22rpx;
        margin: 10rpx 0;
      }
      .cd{
        background-color: #f9d6d6;
        color: red;
        font-size: 24rpx;
        border-radius: 20rpx;
        padding: 6rpx;
        .left{
          padding: 6rpx;
          background-color: red;
          color: white;
          border-radius: 20rpx;
        }
      }
    }
  }
}
</style>